import React, { useEffect, useState, useRef } from "react";
import "./rightboms.css";
import todayimg from "../../../accets/images/zi.png";
import lv from "../../../accets/images/lv.png";
import * as echarts from "echarts";
import { GetFlow } from "../../../request/api";
function Rightbom() {
  let list1 = useRef(null);
  let [option, Setoption] = useState({
    legend: {
      icon: "circle",
      textStyle:{
        color:'#fff'
      }
    },
    tooltip: {},
    dataset: {
      dimensions: ["product", "2015", "2016", "2017"],
      source: [
        { product: "Matcha Latte", 2015: 43.3, 2016: 85.8, 2017: 93.7 },
        { product: "Milk Tea", 2015: 83.1, 2016: 73.4, 2017: 55.1 },
        { product: "Cheese Cocoa", 2015: 86.4, 2016: 65.2, 2017: 82.5 },
        { product: "Walnut Brownie", 2015: 72.4, 2016: 53.9, 2017: 39.1 },
      ],
    },
    xAxis: { type: "category" },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      {
        type: "bar",
        barWidth: 10,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#2D49FF" },
            { offset: 0.5, color: "#9332FF" },
            { offset: 1, color: "#C32BFF" },
          ]),
          borderRadius: [20, 20, 20, 20],
        },
      },
      {
        type: "bar",
        barWidth: 10,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#35D297" },
            { offset: 0.5, color: "#0DA848" },
            { offset: 1, color: "#00861B" },
          ]),
          borderRadius: [20, 20, 20, 20],
        },
      },
    ],
  });

  useEffect(() => {
    var myChart = echarts.init(list1.current);

    GetFlow().then((res) => {
      console.log(res, "000000");
      option.dataset.dimensions = res.data.data.result[0].dimensions;
      option.dataset.source=res.data.data.result[0].source;
      Setoption(option);
      myChart.setOption(option);
    });
    window.addEventListener('resize', function() {
      myChart.resize();
    });
  });
  return (
    <div className="right_bottom">
      <div className="bom-top">
        <div>校园人员流动情况</div>
      </div>
      <div className="bom-bom">
        <div className="box1">
          <div className="bom-left">
            <img src={todayimg} alt='' className="imggs"></img>
            <div className="boms">
              <span>1</span>
              <span>昨日外来访客</span>
            </div>
          </div>
          <div className="bom-right">
            <img src={lv} className="imggs" alt=''></img>
            <div className="boms">
              <span>1</span>
              <span>今日外来访客</span>
            </div>
          </div>
        </div>
        <div className="box-bom" ref={list1}></div>
      </div>
    </div>
  );
}

export default Rightbom;
